<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>补充</title>
</head>

<body>
    <script src="/js/vue.js"></script>
    <div id="app">
        <!-- 值的绑定时候，用到了v-for -->
        <!-- 官方推荐我们在使用v-for的时候，最好给元素添加 :key属性，key作用主要是为了高效的更新虚拟DOM -->
        <!-- 这个其实和vue虚拟DOM中Diff算法有关系 -->
        <!-- :key属性是标识符，唯一，Diff算法会很容易定位到，识别节点 -->
        <!-- <ul>
            <li v-for="item in name" :key="item">{{item}}</li>
        </ul> -->

        <!-- 数组的响应 -->
        <!-- 因为VUe是响应式，所以当data发生变化的时候，Vue会自动检测数据变化，视图会发生改变 -->
        <h2>{{name}}</h2>
        <button @click="btnClick">button</button>
    </div>

    <script>
        let app = new Vue({
            el: "#app",
            data: {
                msg: 'hello world',
                name: ['A','D', 'B', 'C']
            },
            methods: {
                btnClick() {
                    //把数组中第一个值改成"Shane"
                    //数组通过下标的形式对数据进行改变，不是响应式
                    // this.name[0]="Shane"

                    // 数组的响应
                    // Vue包含了一些观察数组发生改变的编译方法，当调用这些方式的时候，数组数据发生改变，视图也会发生改变
                    // 1. push方法 在数组末尾添加数据
                    // this.name.push('aaa')

                    // 2. pop方法 可以删除数组中的最后一个元素
                    // this.name.pop()

                    //3. shift方法，可以删除数组中第一个元素
                    // this.name.shift() 

                    //4. unshift方法 往数组首位添加啊元素
                    // this.name.unshift("aaa")

                    // //5. splice方法 splice(开始的下标,删除个数,追加后面的元素...item)
                    // // splice的作用：可以删除元素/插入元素/替换元素
                    // this.name.splice(0,1,"shane","xie")

                    // //...扩展符
                    // //可变参数
                    // let total = 0
                    // function sum(...item){
                    //     //es5 
                    //     // for(let i =0;i<item.length;i++){
                    //     //     total = total+item[i]
                    //     // }
                    //     //es6
                    //     // for in 循环 拿出来的是下标
                    //     for(i in item){
                    //         total = total+item[i]
                    //     }

                    //     // for of 循环 拿出来的是元素
                    //     for(i of item){
                    //         total = total+i
                    //     }

                    //     // console.log(total);
                    // }

                    // sum("shane","it","ccc")
                    // // sum(2,5)

                    // // 6. sort()方法
                    // this.name.sort()

                    // // 7. reverse()方法
                    // this.name.reverse()

                    // 8. Vue 提供了一个set方法，可以修改元素(要修改的元素，索引值，修改后的值)
                    Vue.set(this.name,0,"Shane")
                }
            }
        })
    </script>
</body>

</html>